import React, { useMemo } from 'react';
import { ConfigProvider, Menu } from 'antd';
import { useSettingActions, useSettings } from '../../store/settingStore';
import { useMenuData, useMenuSelected, useSkipContainer, useCacheMenus, useMenuActions } from '../../store/menuStore';
import { useSearchParams } from 'react-router-dom';
import { CloseCircleOutlined } from '@ant-design/icons';
import styled from 'styled-components';


const CloseBtn = styled.span`
position: absolute;
right: 0;
top: 0;
padding: 0 6px;
transition: all .3s;
color: #ffffff;
opacity: .5;
&:hover {
  opacity: 1;
  transform: scale(1.2);
}
`

const RightSidebar = () => {
  const [searchParams] = useSearchParams()
  const settings = useSettings();
  const { setSettings } = useSettingActions()
  const menuData = useMenuData()
  const menuSelected = useMenuSelected()
  const skipContainer = useSkipContainer()
  let cacheMenus = useCacheMenus();
  const { setCacheMenus } = useMenuActions()


  const activeUrl = useMemo(() => {
    return searchParams.get('menuUrl') || menuSelected?.url || menuSelected?.path
  }, [searchParams, menuSelected])

  const appInfo = useMemo(() => {
    return menuData.find(item => item.appId === menuSelected?.appId)
  }, [menuData, menuSelected])

  const cacheUrls = useMemo(() => {
    return cacheMenus.map(item => item.url)
  }, [cacheMenus])

  const sliderClose = () => {
    setSettings({
      ...settings,
      showRightSidebar: false
    })
  }

  const findFirstChild = (data) => {
    if (data.children && data.children[0]) {
      return findFirstChild(data.children[0])
    } else {
      return data
    }
  }

  const onClick = (e) => {
    if (searchParams.get('menuTopId') === e.key) return;
    let menu = menuData.find((d) => d.appId === e.key)
    // 设置当前选中的top菜单 清空子菜单的选择 子菜单默认选中第一个
    let activeMenu = findFirstChild(menu)
    skipContainer(activeMenu)
  };

  const handleCLose = (e, item) => {
    e.stopPropagation()
    let its = cacheMenus.filter((d) => (item.url || item.path) !== d.url)
    setCacheMenus(its)
  }

  const menuList = useMemo(() => {
    return menuData.map((d) => {
      let child = d.children && d.children[0] && findFirstChild(d.children[0]);
      let url = child ? child.url || child.path : '';
      return {
        key: d.appId,
        label: <>{d.appName}<CloseBtn style={{ display: activeUrl !== url && cacheUrls.includes(url) ? 'block' : 'none' }} onClick={(e) => handleCLose(e, { url })}><CloseCircleOutlined /></CloseBtn></>,
      }
    })
  }, [menuData, cacheUrls, activeUrl])

  return (
    <aside className="layout-slider">
      <div className='layout-slider-logo'>
        {appInfo?.appName || '应用集成管理'}
      </div>
      <div className='layout-slider-nav'>
        <ConfigProvider theme={{
          components: {
            Menu: {
              itemBg: 'none',
              itemColor: '#fff',
              groupTitleColor: '#fff',
              itemHoverColor: 'none',
              itemSelectedColor: '#fff'
            }
          },
        }}>
          <Menu
            onClick={onClick}
            selectedKeys={[menuSelected?.appId]}
            items={menuList}
          />

        </ConfigProvider>
      </div>
      <div className='layout-slider-close' onClick={sliderClose}></div>
    </aside>
  );
};
export default RightSidebar;
